<template>
  <div>
    <c-title :hide="false" text="明细"></c-title>
    <div class="container">
      <div class="price-box">
        <div style="width: 100%; height: 30px; display: flex; justify-content: center; align-items: center" v-if="listDate==''">
          <div style="width: 200px; height: 30px; display: flex; justify-content: center; align-items: center">暂无分润数据</div>
        </div>
        <div
          style="width: 90%; margin: auto; padding: 20px; border: 1px solid #d4d4d4; border-radius: 10px; margin-top: 10px"
          v-for="(item,index) in list"
          :key="index"
          @click="gotoDetail(item.id)"
        >
          <div style="display: flex; justify-content: space-between">
            <div class="font flex-row flex-1">姓名:{{ item.pay_nickname }}</div>
            <div class="font flex-row flex-1"> 状态:{{ item.status }} </div>
          </div>
          <div style="display: flex; justify-content: space-between">
            <div class="font flex-row flex-1"> 分佣类型:{{ item.type }} </div>
            <div class="font flex-row flex-1"> 佣金: {{ item.dividend_amount }} </div>
          </div>
          <div style="display: flex; justify-content: space-between">
            <div class="font flex-row flex-1"> 支付金额: {{ item.order_amount }} </div>
            <div class="font flex-row flex-1">月份:{{ item.create_month }} </div>
          </div>
          <div class="font flex-row flex-1 justify-start">订单编号: {{ item.order_sn }} </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ListdetailsController from "./listdetailsController";

export default ListdetailsController;
</script>

<style>
body {
  background-color: #f6f6f6;
}
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
@import "../common/common.css";
/**index.wxss**/

// page {
//   /* padding-top: 54rpx; */
//   background-color: #f6f6f6;
//   padding-bottom: 60rpx;
// }

.flex {
  width: 95%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  width: 30%;
  height: 100px;
  border: 1px solid #cac8c8;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}

.items {
  width: 30%;
  height: 100px;
  border: 1px solid #3186ad;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.btn {
  width: 200px;
  height: 40px;
  border: 1px solid #3186ad;
  color: #3186ad;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  margin-top: 20px;
}

.name {
  width: 80px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.price {
  width: 80px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.price-box {
  width: 100%;
  /* height: 70px; */

}
.top {
  width: 95%;
  height: 50px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-item {
  width: 30%;
  height: 40px;
  font-weight: 600;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.form-item {
  width: 30%;
  /* height: 40px; */
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.font {
//   width: 250px;
  height: 20px;
//   margin-left: 20px;
  overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

  
}
.form-top {
  width: 95%;
  height: 70px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #d1d5d6;
}
</style>